<template>
  <cl-drawer ref="drawer" :props="{
    title: '配置客服',
    size: '80%',
    appendToBody: true
  }" showConfirm confirmText="添加客服" @confirm="openForm">


    <cl-data-table full ref="table" :data="newList" :columns="newColumns" :show-page="false">
      <template #head>
        <el-row type="flex">
          <div style="display: flex;justify-content: flex-end;width: 100%;">
            <el-input style="width: 200px;" v-model="nameValue" placeholder="请输入姓名筛选" clearable>
            </el-input>
          </div>
        </el-row>
      </template>
      <template #column-max="{ scope: { row, $index } }">
        <el-input v-if="row.multiple_customer_link != 0" v-model.number="row.max" @blur="changeMax(row, $index)"
          @focus="focusInput(row, $index)">
        </el-input>
      </template>
      <template #column-user_name="{ scope: { row } }">
        <span :style="{ color: row.status == 0 ? 'red' : '#000' }"> {{ row.user_name }} </span>
      </template>
      <template #column-status_name="{ scope: { row } }">
        <span :style="{ color: row.status == 0 ? 'red' : '#000' }"> {{ row.status_name }} </span>
      </template>
      <template #column-opt="{ scope: { row } }">
        <div class="flex flex-align-center flex-justify-center">
          <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-color="#156DFF"
            inactive-color="#ccc" @change="changeStatus(row)" style="margin-right: 10px;">
          </el-switch>
          <el-button type="danger" class="m-l-10" @click="removeCus(row)">移除</el-button>
          <!-- <a :href="">下载</a> -->
        </div>
      </template>
    </cl-data-table>

    <add-cus ref="form" @confirm="init()" />

    <!-- <sys-advice-form ref="form" @confirm="handleRefresh()" /> -->

    <!-- <advice-info ref="info" /> -->
    <AddCus />
  </cl-drawer>
</template>
<script>
// import SysAdviceForm from "./sys-advice-form";
import AddCus from "./add-cus.vue";

export default {
  components: {
    // SysAdviceForm
    AddCus
  },
  computed: {
    newList() {
      if (this.nameValue) {
        return this.list.filter(item => item.user_name.toLowerCase().includes(this.nameValue.toLowerCase()))
      } else {
        return this.list
      }
    },
    newColumns() {
      if (this.itemObj.multiple_customer_link == 1) {
        return this.columns
      } else {
        return this.columns.filter(item => item.prop != 'max')
      }
    }
  },
  data() {
    return {
      search: {
        id: "",
        corpid: ""
      },
      nameValue: '',
      columns: [
        {
          label: "姓名",
          prop: "user_name",
          width: 100,
          align: "left"
        },
        { label: "微信昵称", prop: "wxk_user_alias", width: 180 },
        {
          label: "今日加粉数",
          prop: "today_wechat",
          sortable: true,
          // formatter: row => this.$constFilter(row.type, "ADVICE_TYPE"),
          width: 180
        },
        {
          label: "加微上限",
          prop: "max",
          // sortable: true,
          // formatter: row => this.$constFilter(row.type, "ADVICE_TYPE"),
          width: 180
        },
        { label: "今日定金率", prop: "today_deposit_ratio", width: 180 },
        { label: "当月加粉数", prop: "month_wechat", width: 180, sortable: true },
        { label: "当月定金率", prop: "month_deposit_ratio", width: 180 },
        { label: "当月加微到店率", prop: "month_arrive_wechat_ratio", width: 180 },
        { label: "状态", prop: "status_name", width: 180 },
        { label: "操作", prop: "opt", width: 180, fixed: "right" }
      ],
      list: [],
      focusInputObj: {},
      itemObj: {}
    };
  },
  methods: {
    open(data = {}) {
      this.itemObj = data
      console.log(data);

      this.$refs.drawer.create(() => {
        this.search.id = data.id;
        this.search.corpid = data.corpid;

        this.init();
      });
    },

    async init() {
      const { id } = this.search;
      const data = await this.$service.wx.userList({
        id
      });
      // console.log(data);
      this.list = data;

      // var elements = document.getElementsByClassName("cl-flex1");
      // elements[3].style.overflow = 'auto'
      // console.log(elements)
    },
    focusInput(row) {
      // 聚焦赋值
      this.focusInputObj = this.$TOOL.objCopy(row)
      console.log(this.focusInputObj);

    },
    async changeMax(row) {
      let index = this.list.findIndex(ite => ite.user_id == row.user_id)
      try {
        const res = await this.$service.wx.updateMax({
          pu_id: row.pu_id,
          max: row.max
        });
      } catch (error) {
        this.$set(this.list, index, this.focusInputObj);
      }
      this.focusInputObj = {}

    },
    async changeStatus(row) {
      const { pu_id, status } = row;
      const { id } = this.search;
      if (status == 0) {
        const res = await this.$service.wx.userTurnOff({
          pu_id,
          pool_id: id
        });
      } else {
        const res = await this.$service.wx.userTurnOn({
          pu_id,
          pool_id: id
        });
      }
      this.$message.success("修改成功");
    },

    removeCus(item) {
      const { id } = this.search
      this.confirm()
        .then(async () => {
          let params = {
            pu_id: item.pu_id,
            pool_id: id
          };
          await this.$service.wx.remove(params);
          this.$message.success("操作成功");
          this.init();
          // this.refresh();
        })
        .catch(() => { });
    },

    // onLoad({ ctx }) {
    // 	ctx.service(this.$service.wx)
    // 		.set("dict", {
    // 			// 请求
    // 			api: { page: "userList" }
    // 		})
    // 		.done();
    // },
    // async onRefresh(params, { next, render }) {
    // 	this.table.loading = true;
    // 	let query = {
    // 		...params,
    // 		...this.search
    // 	};
    // 	const res = await next(query).finally(() => {
    // 		this.table.loading = false;
    // 	});
    // 	// console.log(res,'res')
    // 	this.table.data = res;

    // 	render(res, res);
    // },
    // // crud刷新
    // refresh() {
    // 	this.$refs.crud.refresh({ page: 1, ...this.search });
    // },
    // handleRefresh() {
    // 	this.search.page = 1;
    // 	this.refresh();
    // },
    // // 详情
    // openDetail(row) {
    // 	this.$refs.info.open(row);
    // },
    // // 新增投诉
    openForm() {
      this.$refs.form.open(this.search);
    }
  }
};
</script>
